<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>User</title>
    <link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../xheditor-1.2.2.min.js"></script>
	<script type="text/javascript" src="../xheditor_lang/zh-cn.js"></script>
</head>
<body>
   <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north'" style="height:30px">
        	<a href="#" id="loadAllDataBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">所有新闻</a>
        	<a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新闻</a>
        	<a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
			<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:200px">

        </div>
        <div data-options="region:'west',split:true" title="新闻分类" style="width:200px;">
        	<ul id="tt"></ul>
        </div>
        <div data-options="region:'center',title:'Main Title',iconCls:'icon-ok'">
            <table id="dg"></table>

            <div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
		        <form id="ff" method="post">
					<div style="margin-bottom:10px">
						<input class="easyui-textbox" name="_id" style="width:100%" data-options="label:'新闻Id:'">
					</div>
		            <div style="margin-bottom:30px">
		                <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'标题:',required:true">
		                <textarea class="xheditor" rows="5" cols="20" ></textarea>
		            </div>
		        </form>
		        <div style="text-align:center;padding:5px 0">
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">Submit</a>
		            <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
		        </div>
		    </div>
        </div>
    </div>
    <script src="https://cdn.bootcss.com/jquery.serializeJSON/2.9.0/jquery.serializejson.js"></script>
    
    <script>
    		var cateId = null;
    		$('#tt').tree({
			    url: "http://localhost:3000/cate/list/1",
			    method:'get',
			    onClick: function(node){//点击标题分类显示新闻
					cateId = node._id;
					$("#dg").datagrid({
						queryParams: {
							cateId: cateId
						}
					}).datagrid('reload');
				}
			});
		//子新闻的分类
		$('#dg').datagrid({
		    url:'http://localhost:3000/news/list',
		    method:'post',
		    queryParams: {
				cateId: cateId
			},
		    fit:true,
		    pagination:true,
		    pageSize:10,
		    pageList:[10,20,30],
		    columns:[[
		    		{field:'ck',title:'复选',checkbox:true},
			        {field:'title',title:'新闻标题',width:100},
			        {field:'desc',title:'新闻内容',width:200},
			        {field:'operate',title:'操作', width:80,
					formatter: function(value,row,index){
						return "<a onclick=deleteData('"+ row._id+"')>删除</a> <a onclick=editData('"+ row._id+"')>修改</a>"
					}
				}
		    ]]
		});
    		//添加
    		$("#addBtn").click(function(){
    			$('#ff').form('clear');
    			if(cateId === null){
    				$.messager.show({
	                title:'信息提示',
	                msg:'请选择分类，否则无法添加新闻',
	                timeout:3000,
	                showType:'show'
	            });
    			}else{
    				$('#dlg').dialog('open');//添加新闻的提示框弹出
    				
    			}
    		});
    		
    		$('#dlg').css({height:300,width:500});
    		//添加按钮
    		function submitForm(){
			var postData = $("#ff").serializeJSON();//这个需要装一个插件（serializejson），然后引入一个cdn
    			postData.cateId = cateId;
    			if(postData._id.length>0){//如果添加新闻是写了id就默认修改这个id的新闻
    				delete postData.cateId;
    				// edit
    				$.ajax({
	    				type:"put",
	    				url:"http://localhost:3000/news/data/"  + postData._id,
	    				data: postData,
	    				async:true
	    			}).done(function(res){
	    				$.messager.show({
		                title:'信息提示',
		                msg:'数据修改成功',
		                timeout:3000,
		                showType:'show'
		            });
		            $('#dlg').dialog('close');
		            $('#dg').datagrid('reload');
	    			})
   
    			}else{	//如果添加新闻是没有写id默认就是在选中的新闻列表下添加一条新闻
    				// add
    				delete postData._id;
    				$.ajax({
	    				type:"post",
	    				url:"http://localhost:3000/news/data",
	    				data: postData,
	    				async:true
	    			}).done(function(res){
	    				$.messager.show({
		                title:'信息提示',
		                msg:'数据添加成功',
		                timeout:3000,
		                showType:'show'
		            });
		            $('#dlg').dialog('close');
		            $('#dg').datagrid('reload');
	    			})
    			}
        };
        
        
        function clearForm(){
            $('#ff').form('clear');
        };
    	
    		//删除新闻，这边定义函数，调用直接在html里面调用
    		function deleteData(id){
    			$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
	                if (r){
			    			$.ajax({
			    				type:"delete",
			    				url:"http://localhost:3000/news/data/" + id,
			    				async:true
			    			}).done(function(res){
			    				$("#dg").datagrid('reload');
			    			})
	                }
            	});
    		};
    		//编辑新闻，这边定义函数，调用直接在html里面调用
    		function editData(id){
    			$.ajax({
    				type:"put",
    				url:"http://localhost:3000/news/data/" +id,
    				async:true
    			}).done(function(res){
    				$('#ff').form('load', res);
    				$('#dlg').dialog('open');
    			})
    		}
    		
    		//删除多个
    		$("#removesBtn").click(function(){
    			var rows = $("#dg").datagrid('getSelections');
    			if(rows.length>0){
    				var ids = [];
    				rows.forEach(function(item,idx){
    					ids.push(item._id)
    				});
    				//console.log(ids);
    				for(var i=0;i<ids.length;i++){
    					$.ajax({
	    					type:"delete",
	    					url:"http://localhost:3000/news/data/" + ids[i],
	    					async:true
	    				}).done(function(res){
	    					$("#dg").datagrid('reload');
	    				})
    				}
    			}  			
    		})
    		
    		$("#loadAllDataBtn").click(function(){
    			cateId = null;
    			 $("#dg").datagrid({
				queryParams: {
					cateId: cateId
				}
			}).datagrid('reload');
    		})
    		
    		function doSearch(value){
            $("#dg").datagrid({
				queryParams: {
					cateId: cateId,
					title: value
				}
			}).datagrid('reload');
        }
    </script>
</body>
</html>